<template>
  <div class="loginheader">
    <mt-header title="登录">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回首页</mt-button>
        <!-- <mt-button @click="handleClose">close</mt-button> -->
      </router-link>
      <mt-button  slot="right" @click="spread">菜单</mt-button>
    </mt-header>
    <ul class="down" v-if="flag">
      <li @click="jumphome">首页</li>
      <li @click="jumpproduct">商品</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'loginheader',
  data () {
    return {
      flag: false
    }
  },
  methods: {
    spread () {
      this.flag = !this.flag
    },
    jumphome () {
      this.$router.push({
        name: 'home'
      })
    },
    jumpproduct () {
      this.$router.push({
        name: 'category',
        params: {
          id: this.$route.params.id || 2
        }
      })
    }
  }

}
</script>

<style scoped lang="scss">
  .loginheader{
    position: relative;
    .mint-header{
      background-color: red;
    }
    .down{
      position: absolute;
      right:0;
      top:40px;
      width:50px;
      text-align: center;
      z-index: 999;
      li{
        height: 25px;
        line-height: 25px;
        list-style-type: none;
        background-color: skyblue;
      }
    }
  }
</style>
